<template>
    <div class="mine-title-container">
        <p class="title">个人中心</p>
        <p class="content">
            <span class="avatar"></span>
            <span class="label">{{
                (phone &&
                    phone.replace(/\b(\w{3})\w+(\w{4})\b/g, "$1****$2")) ||
                "微信用户"
            }}</span>
            <span
                v-if="phone && phone.length === 11"
                class="logout"
                @click="onLogout"
            >
                注销服务信息
            </span>
            <span v-else class="logo"></span>
        </p>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Vue from "vue";
import { Dialog, Toast } from "vant";
import { logout, updateUserInfo, getUserInfo } from "../../api/api";

// 全局注册
Vue.use(Dialog);
Vue.use(Toast);

export default {
    data() {
        return {
            avatar: require("../../assets/img/avatar.png"),
            phone: "",
        };
    },
    created() {},
    computed: {
        ...mapState("user", ["openid", "mid"]),
    },
    mounted() {
        this.phone = localStorage.getItem("phoneNumber") || "";
        if (!this.phone) {
            this.getUserInfo();
        }
    },
    methods: {
        ...mapActions("user", ["setPhone"]),

        getUserInfo() {
            getUserInfo(this.openid)
                .then((resp) => {
                    const { code, data } = resp.data;
                    if (code === "0000" && data) {
                        this.phone = data.phone || "";
                        this.setPhone(this.phone);
                    } else {
                        console.warn("get user info error ", resp);
                    }
                })
                .catch((err) => {
                    console.error("get user info error ", err);
                });
        },

        updateUserInfo() {
            updateUserInfo(this.openid, this.mid, "", true)
                .then((resp) => {
                    const { code, data } = resp.data;
                    if (code === "0000" && data) {
                        console.log("update user info success ", resp);
                    } else {
                        console.warn("update user info error ", resp);
                    }
                })
                .catch((err) => {
                    console.error("update user info error ", err);
                });
        },
        logout() {
            logout(this.openid)
                .then((resp) => {
                    const { code } = resp.data;
                    if (code === "0000") {
                        //
                        localStorage.setItem("phoneNumber", "");
                        localStorage.setItem("mindray-mid", "");
                        localStorage.setItem("mindray-mode", "");
                        localStorage.setItem("mindray-status", 1);
                        this.setPhone("");
                        this.phone = "";
                    } else {
                        console.warn("logout error ", resp);
                        Toast.fail("注销服务信息失败");
                    }
                })
                .catch((err) => {
                    console.error("logout error ", err);
                    Toast.fail("注销服务信息失败");
                })
                .finally(() => {
                    localStorage.setItem("phoneNumber", "");
                    this.setPhone("");
                    this.phone = "";
                    // this.updateUserInfo();
                });
        },
        onLogout() {
            Dialog.confirm({
                message: "是否注销服务信息？",
                confirmButtonText: "是",
                cancelButtonText: "否",
                width: "260px",
            })
                .then(() => {
                    this.logout();
                })
                .catch(() => {
                    // on cancel
                });
        },
    },
};
</script>

<style lang="less" scoped>
.mine-title-container {
    width: 100%;
    height: 122px;
    background: linear-gradient(109deg, #ffb7a2 0%, #fff6ed 100%);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    box-sizing: border-box;
    text-align: left;

    background-image: url("../../assets/img/mine-back.png");
    background-size: 100% 122px;
    background-position: center;
    background-repeat: no-repeat;

    .title {
        font-size: 17px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        margin: 0;
    }

    .content {
        height: 50px;
        margin-top: 22px;
        display: flex;
        align-items: center;
        .avatar {
            width: 50px;
            height: 50px;
            // background: #fcfcf5;
            // border: 1px solid #e38a7a;
            background-image: url("../../assets/img/avatar.png");
            background-size: 50px 50px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            // border-radius: 50%;
        }

        .label {
            font-size: 16px;
            font-weight: 600;
            color: #242628;
            line-height: 22px;
            display: inline-block;
            margin-left: 13px;
        }

        .logo {
            width: 97px;
            height: 24px;
            background-image: url("../../assets/img/mlogo-red.png");
            background-size: 97px 24px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            margin-left: auto;
        }
        .logout {
            width: fit-content;
            min-width: 96px;
            height: 28px;
            border-radius: 14px;
            border: 1px solid #aba5a4;
            font-size: 12px;
            font-weight: 500;
            color: #7e7978;
            line-height: 25px;
            text-align: center;
            margin-left: auto;
        }
    }
}
</style>
